/** @type {import('tailwindcss').Config} */
const darkTheme = {
  bg: '#121212', //background color
  card: '#1E1E1E', //card/container background color
  text: '#E0E0E0', //text color
  lightText: '#A0A0A0', //secondary text color
  border: '#333333', //border color
}
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './src/*.vue'],
  theme: {
    // 定义设计系统的基础值（颜色、间距、字体、断点等）
    extend: {
      colors: {
        // 浅色模式主色
        primary: '#4F46E5',
        secondary: '#10B981',
        // 深色模式主色（自定义命名，方便复用）
        dark: darkTheme,
        light: '#4F46E5', // 亮色模式主色
        DEFAULT: '#4338CA', // 默认主色
        darkColor: '#3730A3', // 暗色模式主色
        neutral: {
          100: '#F9FAFB',
          200: '#F3F4F6',
          300: '#E5E7EB',
          700: '#374151',
          800: '#1F2937',
          900: '#111827',
        },
      },
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
      },
    },
  },
  // darkMode: 'media', // 开启暗黑模式
  darkMode: 'class',
  plugins: [],
  prefix: 'tw-',
  debug: true,
}
